<template>
	<view id="contentDiv">
		<view class="cu-timeline" v-for="(item,index) in dayList" :key="index" @click="toToday(item)">
			<view class="cu-time">
				<text>{{item.month}} {{item.day}},{{item.year}}</text>
			</view>
			<view class="cu-item cur cuIcon-time">
				<view v-if="!memorys[item.dt]" class="content shadow-blur light" :class="colors[item.random1]">
					<text>为今天留下一个回忆吧</text>
				</view>
				<view v-if="memorys[item.dt]">
					<image class="radius h160" :src="memorys[item.dt].bgImg" mode="aspectFill" @click.stop="view_head_image(memorys[item.dt].headImage)"></image>
					<text></text>
				</view>
				<view v-if="memorys[item.dt]" class="content shadow-blur" :class="colors[item.random1]">
					<text>{{memorys[item.dt].content}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data:function(){
			return{
				
				dayList:[],
				
				colors:['bg-red','bg-orange','bg-yellow','bg-olive','bg-green','bg-cyan','bg-blue','bg-purple','bg-mauve','bg-pink','bg-brown','bg-grey'],
				
				memorys:{},//[] 
			}
		},
		methods:{
			toToday:function(item){
				//yyyy-MM-dd
				uni.setStorageSync('today',this.util.format(item.date.getTime(),true))
				this.util.to_nav_page('/pages/today/today')
			},
			getDayList:function(){
				let start = new Date();
				if(this.dayList.length != 0){
					start = new Date(this.dayList[0].date.getTime() - 24*60*60*1000);
				}
				for (var i = 0; i < 8; i++) {
					let temp = new Date(start.getTime() - i*24*60*60*1000);
					let ts = {
						dt:'dt' + this.util.format(temp.getTime(),true).split('-').join('') + 'dt',
						date:temp,
						year:temp.getFullYear(),
						month:this.util.getShortMonth(temp.getMonth()),
						day:temp.getDate(),
						week:this.util.getShortWeek(temp.getDay()),
						random1:Math.floor(Math.random()*12)
					}
					this.dayList.unshift(ts);
				}
				if(uni.getStorageSync('user')){
					uni.request({
						url:this.host + '/today/getMemoryList',
						method:'POST',
						header:this.util.header(),
						data:{
							userId:uni.getStorageSync('user').id,
							startDate:new Date(this.dayList[0].date.getTime() - 24*60*60*1000 *30),
							endDate:start,
							rows:8
						},
						success: (res) => {
							if(res.data.data.flag == 0){
								if(res.data.data.length>0){
									res.data.data.beanList.forEach((item) => {
										this.$set(this.memorys,'dt' + item.createTime.split('-').join('') + 'dt',item);
										console.log('dt' + item.createTime.split('-').join('') + 'dt')
									});
								}
							}else{
								this.util.toast(res.data.data.msg);
							}
						}
					})
				}
			},
			view_head_image:function(img){
				this.util.to_view_image(0,[img])
			},
			toBottom:function(){
				this.$nextTick(() => {
					let contentDiv = uni.createSelectorQuery().select("#contentDiv");
					contentDiv.boundingClientRect((res) => {
						uni.pageScrollTo({
							duration:500,
							scrollTop:res.height
						})
					}).exec();
				})
			}
		},
		onLoad:function(){
			this.getDayList();
			
			this.toBottom();
		},
		onShow:function(){
			if(uni.getStorageSync('timeline')){
				this.dayList = [];
				this.memorys = {};
				
				this.getDayList();
				
				uni.removeStorageSync('timeline');
			}
		},
		onPullDownRefresh:function(){
			this.getDayList();
			
			uni.stopPullDownRefresh();
		}
	}
</script>

<style scoped>
	.cu-timeline .cu-time{
		width: 100px;
	}
</style>
